import React, { useState } from 'react';
import { axconst } from '@/shared/axconst';
import { AxStandardCardButtonType, AxStandardCardFilterType } from '@/components/AxList/AxStandardLayout/data.d';
import { AxStandardWideList } from '@/components/AxList/AxStandardWideList';
import Material from './components/material';
import Search from './components/search';
import AxColumnAction from '@/components/AxList/AxColumnAction';
import Detail from './components/detail';

const Index: React.FC<any> = props => {
    const [expandedRowKeys, setExpandedRowKeys] = useState(['1']);
    const [detailVisible, setDetailVisible] = useState(false);

    /** 配置列 */
    const columns = [
        {
            title: '订单编号',
            dataIndex: 'orderNumber',
            width: axconst.width.long,
        },
        {
            title: '订单信息',
            dataIndex: 'orderInfo',
            width: axconst.width.long,
        },
        {
            title: '订单金额',
            dataIndex: 'orderMoney',
            width: axconst.width.fouronly,
        },
        {
            title: '数量',
            dataIndex: 'orderCount',
            width: axconst.width.fouronly,
        },
        {
            title: '收货人',
            dataIndex: 'purchaseUser',
            width: axconst.width.fouronly,
        },
        {
            title: '收货人电话',
            dataIndex: 'phone',
            width: axconst.width.phone,
        },
        {
            title: '状态',
            dataIndex: 'orderStatus',
            width: axconst.width.fouronly,
        },
        {
            title: '操作',
            dataIndex: 'orgName8',
            width: axconst.width.operate8,
            render: (value: any, record: any) => (
                <AxColumnAction
                    buttons={[
                        {
                            text: '订单详情',
                            onClick: () => setDetailVisible(true),
                        },
                    ]}
                />
            ),
        },
    ];

    /** 配置操作按钮 */
    const button: AxStandardCardButtonType[] = [];

    const filter: AxStandardCardFilterType[] = []

    const handleExpandedRowsChange = (expandedRows: any) => {
        setExpandedRowKeys(expandedRows);
    };

    const datailProps = {
        visible: detailVisible,
        handleVisible: setDetailVisible,
    }

    return (
        <>
            <AxStandardWideList
                columns={columns}
                button={button}
                filter={filter}
                data={{...axconst.data}}
                checkboxModel={false}
                AdvancedSearch={Search}
                expandedRowKeys={expandedRowKeys}
                onExpandedRowsChange={handleExpandedRowsChange}
                expandedRowRender={(record: any) => (
                    <Material />
                )}
            />
            {detailVisible && <Detail  {...datailProps} />}
        </>
    );
};

export default Index;
